<template>
  <div class="greeting-chatbox">
    <span class="info-item">{{ user_name }}</span>
    <p class="greeting-msg">
      <span v-if="user_age < 45">Hello {{ user_name }} </span>
      <span v-else>Hello Mrs.{{ user_name }} </span>
    </p>
  </div>
</template>

<script>
export default {
  name: 'greet-text',
  props: {
    user_name: {
      type: String,
      default: 'Anonymous'
    },
    user_age: {
      type: Number,
      default: 18
    }
  }
}
</script>

<style scoped>
.greeting-chatbox {
  display: inline-block;
  padding: 4px 8px;
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  gap: 20px;
}

.info-item {
  font-size: 16px;
  color: #fff;
  background-color: #222;
  font-weight: 600;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1;
  padding: 6px 6px;
  border-radius: 10px;
}

.greeting-msg {
  line-height: 1.5;
  border-bottom: 1px solid #000;
}
</style>
